<!-- 机构端-修改密码 -->
<template>
  <view class="password-container">
    <!-- 页面标题 -->
<!--    <view class="page-header">
      <text class="page-title">设置/修改密码</text>
    </view> -->
    
    <!-- 密码表单 -->
    <view class="form-container">
      <!-- 设置新密码 -->
      <view class="form-item">
				<view class="form-item-newpassword">
					<text class="form-label">设置密码</text>
					<u-input
					  v-model="newPassword"
					  placeholder="输入6-12位密码"  
					  :password="!showNewPassword"
					  clearable
						input-align="right"
					  @focus="focusField('newPassword')"
					  @blur="validatePassword"
					  :class="{ 'active-field': activeField === 'newPassword' }"
					></u-input>					
				</view>				
        <view class="error-tip" v-if="passwordError">{{ passwordError }}</view>
        <view class="strength-meter">
          <text :class="['strength-bar', strengthClass]"></text>
          <text class="strength-text">{{ strengthText }}</text>
        </view>
      </view>
      
      <!-- 确认密码 -->
      <view class="form-item">
				<view class="form-item-newpassword">
					<text class="form-label">确认密码</text>
					<u-input
					  v-model="confirmPassword"
					  placeholder="再次输入密码"
					  :password="!showConfirmPassword"
					  clearable
						input-align="right"
					  @focus="focusField('confirmPassword')"
					  @blur="validateConfirmPassword"
					  :class="{ 'active-field': activeField === 'confirmPassword' }"
					></u-input>
				</view>
        <view class="error-tip" v-if="confirmError">{{ confirmError }}</view>
      </view>
      
      <!-- 密码要求提示 -->
      <view class="password-rules">
        <text class="rule-title">密码要求：</text>
        <view class="rule-item" :class="{ 'valid': newPassword.length >= 8 }">
          <u-icon :name="newPassword.length >= 6 ? 'checkmark-circle' : 'close-circle'" 
                 :color="newPassword.length >= 6 ? '#19be6b' : '#fa3534'"
                 size="16"></u-icon>
          <text>至少6~12位长度密码</text>
        </view>
<!--        <view class="rule-item" :class="{ 'valid': hasLetterAndNumber }">
          <u-icon :name="hasLetterAndNumber ? 'checkmark-circle' : 'close-circle'" 
                 :color="hasLetterAndNumber ? '#19be6b' : '#fa3534'"
                 size="16"></u-icon>
          <text>包含字母和数字</text>
        </view>
        <view class="rule-item" :class="{ 'valid': !hasSequentialNumbers }">
          <u-icon :name="!hasSequentialNumbers ? 'checkmark-circle' : 'close-circle'" 
                 :color="!hasSequentialNumbers ? '#19be6b' : '#fa3534'"
                 size="16"></u-icon>
          <text>不能有连续数字(如123)</text>
        </view> -->
      </view>
      
      <!-- 保存按钮 -->
      <view class="submit-btn">
        <u-button 
          type="primary" 
          shape="circle" 
          @click="submitPassword"
          :disabled="!formValid"
          :loading="loading"
					:custom-style="btuStyle"
        >
          保存
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			btuStyle: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff"
			},
      newPassword: '',
      confirmPassword: '',
      showNewPassword: false,
      showConfirmPassword: false,
      activeField: '',
      loading: false,
      passwordError: '',
      confirmError: ''
    }
  },
  computed: {
    // 密码强度计算
    passwordStrength() {
      if (this.newPassword.length === 0) return 0
      let strength = 0
      
      // 长度得分
      if (this.newPassword.length >= 8) strength += 1
      if (this.newPassword.length >= 12) strength += 1
      
      // 复杂度得分
      if (/[a-z]/.test(this.newPassword)) strength += 1
      if (/[A-Z]/.test(this.newPassword)) strength += 1
      if (/\d/.test(this.newPassword)) strength += 1
      if (/[^a-zA-Z0-9]/.test(this.newPassword)) strength += 1
      
      return Math.min(strength, 4)
    },
    
    strengthClass() {
      const classes = ['weak', 'medium', 'good', 'strong']
      return classes[this.passwordStrength - 1] || 'weak'
    },
    
    strengthText() {
      const texts = ['弱', '中', '良', '强']
      return texts[this.passwordStrength - 1] || '无'
    },
    
    // 是否包含字母和数字
    hasLetterAndNumber() {
      return /[a-zA-Z]/.test(this.newPassword) && /\d/.test(this.newPassword)
    },
    
    // 是否有连续数字
    hasSequentialNumbers() {
      return /(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210)/.test(this.newPassword)
    },
    
    formValid() {
      return (
        this.newPassword.length >= 6 && this.newPassword.length <=12 &&
        this.confirmPassword.length >= 6 && this.confirmPassword.length <= 12 &&
        this.newPassword === this.confirmPassword &&
        // this.hasLetterAndNumber &&
        // !this.hasSequentialNumbers &&
        !this.passwordError &&
        !this.confirmError
      )
    }
  },
  methods: {
    focusField(field) {
      this.activeField = field
    },
    
    validatePassword() {
      if (this.newPassword.length === 0) {
        this.passwordError = ''
        return
      }
      
      if (this.newPassword.length < 6 && this.newPassword.length > 12) {
        this.passwordError = '密码长度6~12位'
        return
      }
      
      // if (!this.hasLetterAndNumber) {
      //   this.passwordError = '密码必须包含字母和数字'
      //   return
      // }
      
      // if (this.hasSequentialNumbers) {
      //   this.passwordError = '密码不能包含连续数字'
      //   return
      // }
      
      this.passwordError = ''
    },
    
    validateConfirmPassword() {
      if (this.confirmPassword.length === 0) {
        this.confirmError = ''
        return
      }
      
      if (this.confirmPassword !== this.newPassword) {
        this.confirmError = '两次输入的密码不一致'
        return
      }
      
      this.confirmError = ''
    },
    
    submitPassword() {
      this.validatePassword()
      this.validateConfirmPassword()
      
      if (!this.formValid) {
        uni.showToast({
          title: '请检查密码输入是否符合要求！',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      // 模拟API请求
			this.$u.api.updateuserpwd({
				"usercode": uni.getStorageSync('usercode'),  ///#用户code
				"userpwd": this.newPassword,  ///#用户密码
			}).then(res => {
				this.loading = false
				setTimeout(() => {
				  this.loading = false
				  uni.showToast({
				    title: '密码修改成功',
				    icon: 'success'
				  })				  
				  // 返回上一页
				  setTimeout(() => {
				    uni.navigateTo({
				      url: '/pages/Practitioner/mine/practitionerSetting'
				    })
				  }, 600)
				}, 800)
			}).catch(err =>{
				uni.showToast({
				  title: '密码修改失败，请重试！',
				  icon: 'fail'
				})	
				this.loading = false
			})
			
			
			
			

    }
  }
}
</script>

<style lang="scss" scoped>
.password-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 50rpx;
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
}

.form-item {
 //  padding: 30rpx 0;
 //  // position: relative;
 //  border-bottom: 1rpx solid #f5f5f5;
	// display: flex;
	
	.form-item-newpassword {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		margin: 30rpx 0;
	}
  
  &:last-child {
    border-bottom: none;
  }
  
  .form-label {
  //   font-size: 28rpx;
  //   color: #333;
  //   margin-bottom: 20rpx;
  //   display: block;		
		font-size: 28rpx;
		color: #666;
		margin-right: 20px;
  }
  
  .password-actions {
    position: absolute;
    right: 0;
    top: 70rpx;
    z-index: 2;
  }
  
   .error-tip {
    color: #fa3534;
    font-size: 24rpx;
    margin: 30rpx 0;
		text-align: right;
		
  }
  
  .strength-meter {
    display: flex;
    align-items: center;
		margin-bottom: 30rpx;
		justify-content: flex-end;
    
    .strength-bar {
      height: 6rpx;
      width: 120rpx;
      margin-right: 20rpx;
      border-radius: 3rpx;
      background-color: #ebedf0;
      
      &.weak {
        width: 30rpx;
        background-color: #fa3534;
      }
      
      &.medium {
        width: 60rpx;
        background-color: #ff9900;
      }
      
      &.good {
        width: 90rpx;
        background-color: #19be6b;
      }
      
      &.strong {
        width: 120rpx;
        background-color: #2979ff;
      }
    }
    
    .strength-text {
      font-size: 24rpx;
      color: #909399;
    }
  }
}

.password-rules {
  padding: 20rpx 0;
  
  .rule-title {
    font-size: 26rpx;
    color: #909399;
    display: block;
    margin-bottom: 15rpx;
  }
  
  .rule-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    font-size: 24rpx;
    color: #606266;
    
    &.valid {
      color: #19be6b;
    }
    
    text {
      margin-left: 8rpx;
    }
  }
}

.submit-btn {
  margin: 50rpx 0 30rpx;
  
  /deep/ .u-button {
    height: 90rpx;
    font-size: 32rpx;
  }
}
</style>